<template>
  <div :class="$style.title">Volar 测试</div>
  <div @click="onClickText" :class="$style.text">{{text}}</div>
  <button @click="addFoo">+1</button>
</template>
<script lang="ts">
import { defineComponent, toRef } from 'vue';

export default defineComponent({
  name: 'VolarTsc',
  // 不推荐使用emit，推荐优先使用类似react的基于prop的事件暴露方案
  emits: ['clickText', 'update:foo'],
  props: {
    text: {
      type: String,
      required: true,
    },
    foo: Number
  },
  setup(props, ctx) {
    function onClickText() {
      ctx.emit('clickText');
    }

    const modelFoo = toRef(props, 'foo');

    function addFoo() {
      if (typeof modelFoo.value !== 'undefined') {
        ctx.emit('update:foo', modelFoo.value + 1);
      }
    }

    return {
      onClickText,
      addFoo
    };
  },
});
</script>
<style module lang="scss">
.title {
  color: yellow;
}
.text {
  font-weight: bold;
  background-color: rgb(151, 151, 151);
}
</style>
